<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper 调试测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f5f5f5;
    }
    .test-info {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .debug-log {
      background: #f0f0f0;
      padding: 10px;
      border-radius: 4px;
      font-family: monospace;
      margin-top: 10px;
      max-height: 200px;
      overflow-y: auto;
    }
    .test-case {
      margin: 10px 0;
      padding: 10px;
      background: #fff;
      border-left: 4px solid #4CAF50;
    }
    .issue {
      border-left-color: #ff9800;
    }
    .error {
      border-left-color: #f44336;
    }
  </style>
</head>
<body>
  <h1>Swiper 轮播闪烁问题调试</h1>

  <div class="test-info">
    <h2>问题描述</h2>
    <p>第一组和第二组切换到下一组时会闪烁，第三组开始没问题</p>
  </div>

  <div class="test-info">
    <h2>getNormalizedOffset 计算测试</h2>
    <div id="offset-test"></div>
  </div>

  <div class="test-info">
    <h2>问题分析</h2>
    <div id="analysis"></div>
  </div>

  <script>
    // 模拟 getNormalizedOffset 函数
    function getNormalizedOffset(index, currentIndex, totalItems) {
      const offset = index - currentIndex;

      if (totalItems <= 2) {
        return offset;
      }

      const halfLength = Math.floor(totalItems / 2);

      if (offset > halfLength) {
        return offset - totalItems;
      } else if (offset < -halfLength) {
        return offset + totalItems;
      }

      return offset;
    }

    // 测试函数
    function testOffsets() {
      const totalItems = 6; // 6个图片项
      const testResults = [];

      // 测试所有可能的切换情况
      for (let current = 0; current < totalItems; current++) {
        for (let target = 0; target < totalItems; target++) {
          if (current !== target) {
            const offset = getNormalizedOffset(target, current, totalItems);
            const translateX = offset * 100;

            testResults.push({
              from: current,
              to: target,
              offset: offset,
              translateX: translateX,
              issue: Math.abs(offset) > 3 // 标记潜在问题
            });
          }
        }
      }

      return testResults;
    }

    // 执行测试并显示结果
    const results = testOffsets();
    const offsetTestDiv = document.getElementById('offset-test');

    // 找出问题切换
    const problematicTransitions = results.filter(r =>
      (r.from === 0 && r.to === 1) ||
      (r.from === 1 && r.to === 2) ||
      (r.from === 2 && r.to === 3)
    );

    offsetTestDiv.innerHTML = `
      <h3>关键切换路径分析（6个项目）</h3>
      ${problematicTransitions.map(r => `
        <div class="test-case ${r.issue ? 'issue' : ''}">
          从 ${r.from} → ${r.to}:
          offset = ${r.offset},
          translateX = ${r.translateX}%
          ${r.issue ? ' ⚠️ 可能有问题' : ' ✅ 正常'}
        </div>
      `).join('')}

      <h3>完整测试结果</h3>
      <div class="debug-log">
        ${results.map(r =>
          `${r.from}→${r.to}: offset=${r.offset}, translateX=${r.translateX}%`
        ).join('\n')}
      </div>
    `;

    // 分析结果
    const analysisDiv = document.getElementById('analysis');
    analysisDiv.innerHTML = `
      <div class="test-case">
        <h3>根本原因</h3>
        <p>闪烁可能是因为：</p>
        <ol>
          <li><strong>Z-index 切换时机</strong>: 当前项的 z-index 为 2，其他为 1。切换时可能存在 z-index 更新与动画不同步</li>
          <li><strong>动画时长不匹配</strong>: isAnimating 锁定 800ms，但 CSS transition 是 600ms</li>
          <li><strong>Display 属性</strong>: 所有项都设置为 display: block，可能造成重叠渲染</li>
        </ol>
      </div>

      <div class="test-case issue">
        <h3>建议修复方案</h3>
        <ol>
          <li>统一动画时长：将 isAnimating 的 setTimeout 从 800ms 改为 600ms</li>
          <li>优化 z-index 逻辑：使用渐进式 z-index 而不是简单的 2 和 1</li>
          <li>添加 will-change: transform 优化 GPU 渲染</li>
          <li>检查是否需要添加 backface-visibility: hidden</li>
        </ol>
      </div>
    `;
  </script>
</body>
</html>